<template>
	<view>
			<view style="height: 160rpx;box-sizing:border-box; padding: 81rpx 30rpx 0;border-bottom: 2rpx solid #F7F7F7;display: flex;align-items: center;padding-bottom: 30rpx;">
				<image src="/static/shequ/fh.png" @click="backTo" style="margin-right: 21rpx; width: 18rpx;height: 32rpx;" mode="aspectFit"></image>
				<text style="font-size: 32rpx;margin-right: 470rpx;">直播</text>
				<image src="/static/index/组%2012@2x.png" style="width: 23rpx;height: 25rpx;" mode="aspectFit"></image>
				<text style="font-size: 24rpx;margin: 0 18rpx 0 9rpx;">成都</text>
				<image src="/static/meishi/返回@2x(1).png" style="width: 10rpx;height: 17rpx;" mode="aspectFit"></image>
			</view>
			<view style="margin: 0 30rpx;">
				<!-- 导航栏 -->
				<view class="horizonal-tab">
					<scroll-view scroll-x="false" scroll-with-animation class="scroll-tab">
						<block v-for="(item, index) in zb" :key="index">
							<view class="scroll-tab-item" :class="{ active: tabIndex == index }" @tap="toggleTab(index)">
								{{ item.name }}
								<view class="select"></view>
							</view>
						</block>
					</scroll-view>
				</view>
				<!-- 内容区 -->
				<view v-if="tabIndex===0">
					<view @click="toPage" >
						<view style="position: relative;width: 690rpx;height: 444rpx;">
							<image src="" style="width: 690rpx;height: 444rpx;border-radius: 15rpx;background-color: #43353D;"  mode="aspectFill"></image>
							<view style="display: flex;position: absolute;top: 33rpx;left: 19rpx;">
								<text style="display: flex;align-items: center;justify-content: center; margin-right: -20rpx; width: 92rpx;height: 42rpx;border-radius: 6rpx;background-color: #00C657;color: #fff;font-size: 24rpx;z-index: 1;">直播中</text>							
								<view style="width: 92rpx;height: 42rpx;border-radius: 0 6rpx 6rpx 0;background: url(/static/zb/圆角矩形%204%20拷贝@2x.png) no-repeat;padding-left: 10rpx;display: flex;align-items: center;justify-content: center;">
									<view style="display: flex;align-items: center;justify-content: center;">
										<image src="/static/zb/tx.png" style="width: 18rpx;height: 18rpx;margin-right: 5rpx;" mode="aspectFit"></image>
										<text style="font-size: 24rpx;color: #fff;">454</text>
									</view>
								</view>
							</view>
							<view style="position: absolute;top: 322rpx;left: 23rpx;">
								<text style="font-size: 30rpx;color: #fff;">营养调配师告诉你选择哪些生鲜蔬菜更合适</text>
								<view style="display: flex;align-items: center;margin-top: 10rpx;">
									<image src="/static/meishi/cherry@2x.png" style="width: 40rpx;height: 40rpx;border-radius: 50%;" mode="aspectFit"></image>
									<text style="font-size: 28rpx;color: #fff;margin-left: 10rpx;">千库超级市场</text>
								</view>
							</view>
						</view>
					</view>
					<scroll-view scroll-x="true" style="margin-top: 16rpx;">
						<view style="display: flex;align-items: center;">
							<view style="display: flex;margin-right: 40rpx;">
								<image src="" style="width: 122rpx;height: 122rpx;border-radius: 12rpx;background-color: #9FBD6A;" mode="aspectFill"></image>
								<view style="display: flex;flex-direction: column;margin-left: 10rpx;font-size: 30rpx;">
									<text style="width: 108rpx;height: 40rpx;color: #fff;background-color: #00C657;border-radius: 8rpx;display: flex;justify-content: center;">讲解中</text>
									<text style="margin-top: 30rpx;color: #7D7D7D;">¥ 89.00</text>
								</view>
							</view>
							<view style="display: flex;margin-right: 40rpx;">
								<image src="" style="width: 122rpx;height: 122rpx;border-radius: 12rpx;background-color: #9FBD6A;" mode="aspectFill"></image>
								<view style="width: 120rpx;height: 40rpx; display: flex;flex-direction: column;margin-left: 10rpx;font-size: 30rpx;">
									<text style="color: #585350;">海鲜杂烩</text>
									<text style="margin-top: 30rpx;color: #7D7D7D;">¥ 89.00</text>
								</view>
							</view>
							<view style="display: flex;margin-right: 40rpx;">
								<image src="" style="width: 122rpx;height: 122rpx;border-radius: 12rpx;background-color: #9FBD6A;" mode="aspectFill"></image>
								<view style="width: 120rpx;height: 40rpx; display: flex;flex-direction: column;margin-left: 10rpx;font-size: 30rpx;">
									<text style="color: #585350;">海鲜杂烩</text>
									<text style="margin-top: 30rpx;color: #7D7D7D;">¥ 89.00</text>
								</view>
							</view>
						</view>
					</scroll-view>
					<view style="height: 20rpx;background-color: #f7f7f7;margin: 30rpx -30rpx 30rpx;"></view>
					<view >
						<text style="font-size: 42rpx;color: #322C28;">热门主播</text>
						<scroll-view scroll-x="true" >
							<view style="display: flex;margin-top: 30rpx;">
								<view style="display: flex;flex-direction: column;align-items: center;margin-right: 30rpx;" v-for="(item,index) in 6" :key="index">
									<view style="position: relative;">
										<image src="" style="width: 142rpx;height: 142rpx;border-radius: 50%;background-color: #F38896;" mode="aspectFit"></image>
										<text style="font-size: 22rpx;color: #fff;position: absolute;top:95rpx;left: 35rpx;">直播中</text>
									</view>
									<text style="font-size: 30rpx;color: #47413E;margin-top: 20rpx;margin-bottom: 40rpx;">张三</text>
								</view>						
							</view>
						</scroll-view>
					</view>
					<view @click="toPage">
						<view style="position: relative;width: 690rpx;height: 444rpx;">
							<image src="" style="width: 690rpx;height: 444rpx;border-radius: 15rpx;background-color: #43353D;"  mode="aspectFill"></image>
							<view style="display: flex;position: absolute;top: 33rpx;left: 19rpx;">
								<text style="display: flex;align-items: center;justify-content: center; margin-right: -20rpx; width: 92rpx;height: 42rpx;border-radius: 6rpx;background-color: #00C657;color: #fff;font-size: 24rpx;z-index: 1;">直播中</text>							
								<view style="width: 92rpx;height: 42rpx;border-radius: 0 6rpx 6rpx 0;background: url(/static/zb/圆角矩形%204%20拷贝@2x.png) no-repeat;padding-left: 10rpx;display: flex;align-items: center;justify-content: center;">
									<view style="display: flex;align-items: center;justify-content: center;">
										<image src="/static/zb/tx.png" style="width: 18rpx;height: 18rpx;margin-right: 5rpx;" mode="aspectFit"></image>
										<text style="font-size: 24rpx;color: #fff;">454</text>
									</view>
								</view>
							</view>
							<view style="position: absolute;top: 322rpx;left: 23rpx;">
								<text style="font-size: 30rpx;color: #fff;">营养调配师告诉你选择哪些生鲜蔬菜更合适</text>
								<view style="display: flex;align-items: center;margin-top: 10rpx;">
									<image src="/static/meishi/cherry@2x.png" style="width: 40rpx;height: 40rpx;border-radius: 50%;" mode="aspectFit"></image>
									<text style="font-size: 28rpx;color: #fff;margin-left: 10rpx;">千库超级市场</text>
								</view>
							</view>
						</view>						
					</view>
					<scroll-view scroll-x="true" style="margin-top: 16rpx;margin-bottom: 40rpx;">
						<view style="display: flex;align-items: center;">
							<view style="display: flex;margin-right: 40rpx;">
								<image src="" style="width: 122rpx;height: 122rpx;border-radius: 12rpx;background-color: #9FBD6A;" mode="aspectFill"></image>
								<view style="display: flex;flex-direction: column;margin-left: 10rpx;font-size: 30rpx;">
									<text style="width: 108rpx;height: 40rpx;color: #fff;background-color: #00C657;border-radius: 8rpx;display: flex;justify-content: center;">讲解中</text>
									<text style="margin-top: 30rpx;color: #7D7D7D;">¥ 89.00</text>
								</view>
							</view>
							<view style="display: flex;margin-right: 40rpx;">
								<image src="" style="width: 122rpx;height: 122rpx;border-radius: 12rpx;background-color: #9FBD6A;" mode="aspectFill"></image>
								<view style="width: 120rpx;height: 40rpx; display: flex;flex-direction: column;margin-left: 10rpx;font-size: 30rpx;">
									<text style="color: #585350;">海鲜杂烩</text>
									<text style="margin-top: 30rpx;color: #7D7D7D;">¥ 89.00</text>
								</view>
							</view>
							<view style="display: flex;margin-right: 40rpx;">
								<image src="" style="width: 122rpx;height: 122rpx;border-radius: 12rpx;background-color: #9FBD6A;" mode="aspectFill"></image>
								<view style="width: 120rpx;height: 40rpx; display: flex;flex-direction: column;margin-left: 10rpx;font-size: 30rpx;">
									<text style="color: #585350;">海鲜杂烩</text>
									<text style="margin-top: 30rpx;color: #7D7D7D;">¥ 89.00</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zb: [{ name: '美食' }, { name: '服装' }, { name: '水果' }, { name: '蔬菜' }, { name: '美妆' }, { name: '穿搭' }],
				tabIndex: 0 /* 选中标签栏的序列,默认显示第一个 */,
			};
		},
		onLoad() {
			createRoom()
		},
		methods:{
			backTo(){
				uni.navigateBack({
				        delta: 1,
				        animationType: 'pop-out',
				        animationDuration: 200
				    });
			},
			toPage(){
				// uni.navigateTo({
				// 	url:'/pages/zbxq/zbxq'
				// })
				//创建直播
				let roomId = 2
				let customParams = encodeURIComponent(JSON.stringify({path: 'pages/zbxq/zbxq', pid: 1 }))
				uni.navigateTo({
					url:`plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
				})
				
			},
			toggleTab(index) {
				this.tabIndex = index;
			}
		}
	}
</script>
<style lang="scss">
.select {
	display: none;
	width: 40rpx;
	height: 8rpx;
	margin-left: 15rpx;
	background-color: #00C657;
	border-radius: 4rpx;
}
.horizonal-tab {
	font-size: 28rpx;
	color: #b4b4b4;
}
.horizonal-tab .active {
	color: #00C657;
	font-size: 32rpx;
	.select {
		display: block;
		margin-top: -10rpx;
	}
}
.scroll-tab {
	white-space: nowrap; /* 必要，导航栏才能横向*/
	cursor: pointer;
	height: 140rpx;
	line-height: 100rpx;
	overflow-x: hidden;
	
}
.scroll-tab-item {
	display: inline-block; /* 必要，导航栏才能横向*/
	margin: 0 30rpx 49rpx 30rpx;
}
</style>
